<template>
    <a-row>
        <a-col>&nbsp;</a-col>
    </a-row>
    <a-row>
        <a-col :span="4">
            <a-input placeholder="要查询的姓名" v-model="table.params.name"></a-input>
        </a-col>
        <a-col :span="2">
            <a-button type="primary" @click="getAllEmps">
                <IconSearch></IconSearch>
                搜索
            </a-button>
        </a-col>
        <a-col :span="2">
            <a-button type="primary" @click="table.advancedSearch=!table.advancedSearch">
                <IconFindReplace></IconFindReplace>
                高级搜索
            </a-button>
        </a-col>
        <a-col :span="2">
            <a-button type="primary" status="warning" @click="resetParams">
                <IconRefresh></IconRefresh>
                重置
            </a-button>
        </a-col>
        <a-col :span="8">&nbsp;</a-col>
        <a-col :span="2">
            <a-upload ref="uploadRef" :action="requestUrl.importEmp.url" :show-file-list="false"
                      :disabled="upload.loading"
                      :auto-upload="true"
                      :headers="upload.headers"
                      :on-before-upload="upload.beforeUpload"
                      @success="uploadSuccess" @error="uploadError"
            >
                <template #upload-button>
                    <a-button :loading="upload.loading" type="primary" status="warning">
                        <span v-show="!upload.loading">
                            <IconUpload></IconUpload>
                            导入数据
                        </span>
                        <span v-show="upload.loading">
                            正在导入
                        </span>
                    </a-button>
                </template>
            </a-upload>
        </a-col>
        <a-col :span="2">
            <a-button @click="exportEmp" type="primary" status="success">
                <IconDownload></IconDownload>
                导出数据
            </a-button>
        </a-col>
        <a-col :span="2">
            <a-button type="primary" @click="handleOpenModal('add')">
                <IconUserAdd></IconUserAdd>
                添加员工
            </a-button>
        </a-col>
    </a-row>
    <a-card v-show="table.advancedSearch">
        <a-form :model="table.params">
            <a-row>
                <a-col :span="4">
                    <a-form-item field="nativePlace" label="籍贯">
                        <a-input v-model="table.params.nativePlace"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item field="nativePlace" label="工号">
                        <a-input v-model="table.params.workId"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item field="nativePlace" label="部门">
                        <a-tree-select
                                :data="departments"
                                v-model="table.params.departmentId"
                                placeholder="请选择部门"
                        ></a-tree-select>
                    </a-form-item>
                </a-col>
                <a-col :span="8">
                    <a-form-item field="nativePlace" label="入职日期">
                        <a-range-picker
                                v-model="table.params.beginDateScope"
                        />
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
    </a-card>
    <a-table :columns="table.columns" :data="table.data" :loading="table.loading" :pagination="table.pagination"
             :stripe="true" :scroll="scroll">
        <template #optional="{record}" style="border-left: 1px solid black">
            <a-row :gutter="8" align="center" justify="center">
                <a-col :span="6">
                    <!--用自己的方式把table单条数据完整的展示出来,需要良好的排版才能好看-->
                    <!--<a-button>详细</a-button>-->
                </a-col>
                <a-col :span="6">
                    <a-button type="primary" @click="handleOpenModal('edit',record)">编辑</a-button>
                </a-col>
                <a-col :span="6">
                    <a-button type="primary" status="danger" @click="delModal.data=record,delModal.open=true">删除
                    </a-button>
                </a-col>
            </a-row>
        </template>
    </a-table>
    <a-modal :title="modal.title" :visible="modal.open" @cancel="modal.open=false" fullscreen :footer="false">
        <EmpForm :type="modal.type" :editEmp="modal.editEmp"
                 :departments="departments"
                 @success="getAllEmps(),modal.open=false"
                 @cancel="modal.open=false"></EmpForm>
    </a-modal>
    <DWM :open="delModal.open" :name="delModal.data.name" @ok="delEmp" @cancel="delModal.open=false"></DWM>
</template>

<script>
    import {
        IconUpload,
        IconDownload,
        IconSearch,
        IconFindReplace,
        IconUserAdd,
        IconRefresh
    } from '@arco-design/web-vue/es/icon'
    import EmpForm from '../../components/emp/EmpForm'
    import DWM from '../../components/common/DelWarnModal'

    export default {
        name: "",
        components: {
            IconUpload,
            IconDownload,
            IconSearch,
            IconFindReplace,
            IconUserAdd,
            IconRefresh,
            EmpForm,
            DWM
        },
        data() {
            return {
                scroll: {
                    x: 1600
                },
                departments: [],
                table: {
                    loading: false,
                    columns: [
                        {title: '姓名', dataIndex: 'name', fixed: 'left', width: 100},
                        {title: '性别', dataIndex: 'gender', width: 100},
                        {title: '生日', dataIndex: 'birthday', width: 150},
                        {title: '籍贯', dataIndex: 'nativePlace', width: 150},
                        {title: '邮箱', dataIndex: 'email', width: 150},
                        {title: '手机号', dataIndex: 'phone', width: 150},
                        {title: '部门', dataIndex: 'department.name', width: 150},
                        {title: '工号', dataIndex: 'workId', width: 100},
                        {title: '民族', dataIndex: 'nation.name', width: 100},
                        {title: '地址', dataIndex: 'address'},
                        {title: '操作', slotName: 'optional', width: 300, fixed: 'right', align: 'center'},
                    ],
                    data: [],
                    advancedSearch: false,
                    pagination: {
                        total: 0,
                        current: 1,
                        pageSize: 10,
                        onChange: (current) => {
                            this.table.params.currentPage = current
                            this.getAllEmps()
                        }
                    },
                    params: {}
                },
                modal: {
                    type: 'add',
                    title: '添加员工',
                    open: false,
                    editEmp: {}
                },
                delModal: {
                    open: false,
                    data: {}
                },
                upload: {
                    loading: false,
                    headers: {
                        Authorization: window.localStorage.getItem("token")
                    },
                    beforeUpload: (file) => {
                        return new Promise(resolve => {
                            this.upload.loading = true
                            resolve(file)
                        })
                    }
                }
            }
        },
        methods: {
            resetParams() {
                this.table.params = {
                    currentPage: 1,
                    size: 10,
                    name: '',
                    nativePlace: '',
                    workId: '',
                    beginDateScope: []
                }
                this.getAllEmps()
            },
            initDepartments() {
                this.$get(this.requestUrl.getAllDepartmentsInEmp.url).then(res => {
                    this.departments = res.obj
                })
            },
            getAllEmps() {
                let url = this.requestUrl.getAllEmps.url
                let params = Object.assign({}, this.table.params)
                if (this.table.params.beginDateScope.length === 2) {

                    url = url + '?beginDateScope=' + this.table.params.beginDateScope
                    params.beginDateScope = []
                }
                this.table.loading = true
                this.$get(url, params).then(res => {
                    this.table.pagination.total = res.obj.total
                    this.table.pagination.current = this.table.params.currentPage
                    this.table.pagination.pageSize = this.table.params.size
                    this.table.data = res.obj.data
                    this.table.loading = false
                })
            },
            handleOpenModal(type, record) {
                this.modal.type = type
                if (type === 'add') {
                    this.modal.title = '添加员工'
                } else {
                    this.modal.title = '修改员工'
                    record.workId = record.workId.toString()
                    this.modal.editEmp = record
                }
                this.modal.open = true
            },
            delEmp() {
                this.$delete(this.requestUrl.delEmp.url + this.delModal.data.id).then(res => {
                    if (res) {
                        this.$message.success(res.message)
                        this.getAllEmps()
                    }
                    this.delModal.open = false
                })
            },
            exportEmp() {
                this.$download(this.requestUrl.exportEmp.url)
            },
            uploadSuccess(file) {
                if (file.response.code === 200) {
                    this.$message.success('导入成功')
                    this.getAllEmps()
                } else {
                    this.$message.error(file.response.message + ',可能工号已经存在')
                }
                this.upload.loading = false
            },
            uploadError() {
                this.$message.error('未知原因导致失败,请联系管理员')
                this.upload.loading = false
            }
        },
        mounted() {
            this.initDepartments()
            this.resetParams()
        }
    }
</script>

<style scoped>

</style>
